<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>文章标题</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="文章标题"
          v-model="params['title']"
        ></el-input>
      </el-row>
      <el-row>
        <span>审核状态</span>
        <el-select v-model="params['status']" clearable placeholder="审核状态" size="small">
        <el-option
          v-for="(item,index) in checkStatusList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      </el-row>
      <el-row style="padding-top:10px"> 
        <!-- <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-plus"
          @click="addRow"
        >添加</el-button> -->
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
      <!-- <el-row>
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="el-icon-document"
          @click="exportExcelFile"
        >导出</el-button>
      </el-row> -->
    </div>

    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
    >
    <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
      <!-- <el-table-column align="center" type="index" label="ID" width="80"></el-table-column> -->
      <el-table-column prop="id" align="center" label="ID" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" align="center" label="文章标题" width="320">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="sort" align="center" label="排序" width="120" >
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="categoryName" align="center" label="所属栏目" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.categoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="creator" align="center" label="发布人" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.creator}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="isHot" align="center" label="是否首页新闻" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.isHot | isHotFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="审核状态" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.status | typeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column width="200" prop="createTime" align="center" label="添加时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <span type="primary" size="mini" @click="editRow(scope.row)" style="color:#409eff;padding-right:20px">修改</span>
          <span size="mini" type="danger" @click="handleDelete(scope.row)" style="color:red;">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="temp.title" placeholder="文章标题"  style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="temp.sort" placeholder="排序"></el-input-number>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="temp.status" placeholder="请选择">
            <el-option v-for="(item,value) in typeFilter" :key="value" :label="item" :value="value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="首页新闻" prop="isHot">
          <el-select v-model="temp.isHot" placeholder="请选择">
            <el-option v-for="(item,value) in isHotFilter" :key="value" :label="item" :value="value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属栏目" prop="categoryId">
          <el-select v-model="temp.categoryId" placeholder="请选择">
            <el-option v-for="(item,value) in cmsList" :key="value" :label="item.categoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="阅读数量" prop="viewNum">
          <el-input-number v-model="temp.viewNum" placeholder="阅读数量"></el-input-number>
        </el-form-item>

         <el-form-item label="收藏数量" prop="collectNum">
          <el-input-number v-model="temp.collectNum" placeholder="收藏数量"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="生效时间" prop="startDate">
          <el-input v-model="temp.startDate" placeholder="生效时间"></el-input>
        </el-form-item>
        <el-form-item label="失效时间" prop="endDate">
          <el-input v-model="temp.endDate" placeholder="失效时间"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="文章内容" prop="content">
          <el-input v-model="temp.content" placeholder="文章内容"></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="文章内容" prop="content ">
          <div class="quill-wrap" style="height:350px;">
            <quill-editor
              style="height:300px;"
              v-model="temp.content "
              ref="myQuillEditor"
              :options="editorOption"
            ></quill-editor>
          </div>
        </el-form-item> -->

        <el-row :gutter="20" >
          <el-col :span="12">
            <el-form-item label="封面(345*108)" prop="coverImg">
              <el-upload
                class="avatar-uploader"
                :action="UPLOAD_URL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess('coverImg')"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="temp.coverImg" :src="temp.coverImg|absUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="回答" prop="content">
          <div class="quill-wrap" style="height:500px;">
            <quill-editor style="height:400px;" v-model="temp.content" ref="myQuillEditor" :options="editorOption">
            </quill-editor>
          </div>
        </el-form-item>

        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";

Quill.register("modules/ImageExtend", ImageExtend);
let typeFilter = ["未审核", "已审核"];
let isHotFilter = ["否", "是"];
export default {
   components: {
    quillEditor
  },
  data() {
    return {
      container: false,
      checkStatusList: [
        {
          label: '未审核',
          value: 0
        },
        {
          label: '已审核',
          value: 1
        }
      ],
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList:[],
      list:[],
      temp: {
        id: "",
        title: "",
        content: "",
        type: "",
        sort:"",
        categoryId:null,
        viewNum:"",
        coverImg:"https://images2017.cnblogs.com/blog/675289/201801/675289-20180113230009144-20397994.jpg",
        collectNum:"",
      },
      editorOption: {
        placeholder: "在这里输入内容",
        modules: {
          ImageExtend: {
            loading: true,
            name: "file",
            action: this.UPLOAD_URL,
            response: res => {
              return res.info;
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      },
      typeFilter: typeFilter,
      isHotFilter: isHotFilter,
      rules: {
        title: [
          {
            required: true,
            message: "文章标题",
            trigger: "change",
            max: 50
          }
        ],
        sort: [
          { required: true, message: "排序不能为空", trigger: "change" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        isHot: [
          { required: true, message: "首页新闻不能为空", trigger: "change" }
        ],
        coverImg: [
          { required: true, message: "封面不能为空", trigger: "change" }
        ],
        content: [
          { required: true, message: "文章内容不能为空", trigger: "change" }
        ],
        categoryId: [{ required: true, message: "所属栏目不能为空", trigger: "change" }]
      }
    };
  },
  created() {
     this.loadData();
     this.cmsLoadData();
  },

  filters: {
    typeFilter(status) {
      return typeFilter[parseInt(status)];
    },
    isHotFilter(status){
      return isHotFilter[parseInt(status)];
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFilter () {
      this.loadData()
    },
    handleDelete (row) {
      this.$confirm('确定删除该文章吗?', '提示').then(_ => {
        this.$post('/admin/cms_article/delete', {
          id: row.id
        }).then(data => {
          this.loadData()
        })
      })
    },
    cmsLoadData(){
      this.$post("/admin/cms_category/list", {pageNo:1,pageSize:10000})
        .then(data => {
          this.cmsList = data.dataList;
        })
        .catch(_ => {
          console.log("Err",_)
        });
    },
    addRow() {
      this.dialogFormVisible = true
      this.isEditing = false
      this.temp = {}
    },
    editRow(row) {
      this.dialogFormVisible = true
      this.isEditing = true
      this.temp = Object.assign({}, row)
    },
    loadData(){
      this.$post("/admin/cms_article/list", this.params)
        .then(data => {
          this.list = data.dataList;
          this.total = data.total
        })
        .catch(_ => {
          console.log("Err",_)
        });
    },
    submitFormAction () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          console.log(valid)
          this.submiting = true
          const postData = Object.assign({}, this.temp)
          
          let url = '/admin/cms_article/add '
          if (this.isEditing) {
            url = '/admin/cms_article/modify'
          }
          this.$post(url, postData)
            .then(data => {
              this.loadData()
              this.$$notify('操作成功')
              this.dialogFormVisible = false
            })
            .finally(_ => {
              this.submiting = false
            })
        }
      })
    },
  }
};
</script>
<style>
.el-table td, .el-table th{
  padding: 1px 0;
}
.el-table{
  font-size: 12px;
}
.opencolor{
  color: red;
}
.openSearch {
  /* width: 100px; */
  margin-bottom: 10px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ccc; */
}
</style>